<template>
  <view class="devices-container">
    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input-wrapper">
          <text class="search-icon">🔍</text>
          <input
            v-model="searchKeyword"
            placeholder="搜索设备编号或位置"
            class="search-input"
            @input="handleSearch"
          />
        </view>
        <view class="filter-btn" @click="showFilter = !showFilter">
          <text class="filter-icon">⚙️</text>
          <text>筛选</text>
        </view>
      </view>

      <!-- 筛选条件 -->
      <view class="filter-panel" v-if="showFilter">
        <view class="filter-row">
          <text class="filter-label">设备状态：</text>
          <view class="filter-options">
            <text
              v-for="status in deviceStatusOptions"
              :key="status.value"
              class="filter-option"
              :class="{ active: filterStatus === status.value }"
              @click="filterStatus = status.value"
            >{{ status.label }}</text>
          </view>
        </view>
        <view class="filter-row">
          <text class="filter-label">在线状态：</text>
          <view class="filter-options">
            <text
              v-for="online in onlineStatusOptions"
              :key="online.value"
              class="filter-option"
              :class="{ active: filterOnline === online.value }"
              @click="filterOnline = online.value"
            >{{ online.label }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-value">{{ deviceStats.total }}</text>
        <text class="stat-label">设备总数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value online">{{ deviceStats.online }}</text>
        <text class="stat-label">在线设备</text>
      </view>
      <view class="stat-item">
        <text class="stat-value offline">{{ deviceStats.offline }}</text>
        <text class="stat-label">离线设备</text>
      </view>
      <view class="stat-item">
        <text class="stat-value warning">{{ deviceStats.warning }}</text>
        <text class="stat-label">告警设备</text>
      </view>
    </view>

    <!-- 设备列表 -->
    <view class="device-list">
      <view
        v-for="device in filteredDevices"
        :key="device.id"
        class="device-card"
        @click="goToDeviceDetail(device.id)"
      >
        <!-- 设备头部信息 -->
        <view class="device-header">
          <view class="device-title">
            <text class="device-name">{{ device.name }}</text>
            <text class="device-id">ID: {{ device.deviceId }}</text>
          </view>
          <view class="device-status"
            :class="getStatusClass(device.status)"
          >
            {{ getStatusText(device.status) }}
          </view>
        </view>

        <!-- 设备位置 -->
        <view class="device-location">
          <text class="location-icon">📍</text>
          <text class="location-text">{{ device.location }}</text>
        </view>

        <!-- 设备指标 -->
        <view class="device-metrics">
          <view class="metric-item">
            <text class="metric-label">使用率</text>
            <text class="metric-value">{{ device.usage }}%</text>
          </view>
          <view class="metric-item">
            <text class="metric-label">温度</text>
            <text class="metric-value">{{ device.temperature }}°C</text>
          </view>
          <view class="metric-item">
            <text class="metric-label">湿度</text>
            <text class="metric-value">{{ device.humidity }}%</text>
          </view>
          <view class="metric-item">
            <text class="metric-label">电量</text>
            <text class="metric-value" :class="{ low: device.battery < 20 }">{{ device.battery }}%</text>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="device-footer">
          <text class="update-time">最后更新：{{ device.lastUpdate }}</text>
          <view class="online-indicator"
            :class="{ online: device.isOnline, offline: !device.isOnline }"
          ></view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredDevices.length === 0" class="empty-state">
      <text class="empty-icon">🏠</text>
      <text class="empty-text">暂无设备数据</text>
      <text class="empty-desc">请检查网络连接或联系管理员</text>
    </view>

    <!-- 创建工单按钮 -->
    <view class="fab" @click="createWorkOrder">
      <text class="fab-icon">➕</text>
    </view>

    <!-- 自定义底部导航 -->
    <SimpleTabNav :currentTab="1" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import SimpleTabNav from '@/components/SimpleTabNav.vue'

// 搜索关键词
const searchKeyword = ref('')

// 筛选状态
const showFilter = ref(false)
const filterStatus = ref('all')
const filterOnline = ref('all')

// 设备状态选项
const deviceStatusOptions = [
  { label: '全部', value: 'all' },
  { label: '正常', value: 'normal' },
  { label: '维护中', value: 'maintenance' },
  { label: '故障', value: 'fault' }
]

// 在线状态选项
const onlineStatusOptions = [
  { label: '全部', value: 'all' },
  { label: '在线', value: 'online' },
  { label: '离线', value: 'offline' }
]

// 模拟设备数据
const devices = ref([
  {
    id: 1,
    name: '移动厕所-001',
    deviceId: 'MS-001',
    status: 'normal',
    location: '人民广场东侧',
    usage: 75,
    temperature: 22,
    humidity: 65,
    battery: 85,
    isOnline: true,
    lastUpdate: '2024-01-15 14:30'
  },
  {
    id: 2,
    name: '移动厕所-002',
    deviceId: 'MS-002',
    status: 'maintenance',
    location: '中央公园南门',
    usage: 0,
    temperature: 20,
    humidity: 60,
    battery: 15,
    isOnline: true,
    lastUpdate: '2024-01-15 14:25'
  },
  {
    id: 3,
    name: '移动厕所-003',
    deviceId: 'MS-003',
    status: 'fault',
    location: '商业街北口',
    usage: 45,
    temperature: 25,
    humidity: 70,
    battery: 60,
    isOnline: false,
    lastUpdate: '2024-01-15 13:45'
  }
])

// 设备统计
const deviceStats = computed(() => {
  const total = devices.value.length
  const online = devices.value.filter(d => d.isOnline).length
  const offline = total - online
  const warning = devices.value.filter(d => d.status === 'fault').length
  return { total, online, offline, warning }
})

// 筛选后的设备列表
const filteredDevices = computed(() => {
  let result = devices.value

  // 搜索筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(device =>
      device.name.toLowerCase().includes(keyword) ||
      device.deviceId.toLowerCase().includes(keyword) ||
      device.location.toLowerCase().includes(keyword)
    )
  }

  // 设备状态筛选
  if (filterStatus.value !== 'all') {
    result = result.filter(device => device.status === filterStatus.value)
  }

  // 在线状态筛选
  if (filterOnline.value !== 'all') {
    const isOnline = filterOnline.value === 'online'
    result = result.filter(device => device.isOnline === isOnline)
  }

  return result
})

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已通过 computed 自动处理
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    normal: 'status-normal',
    maintenance: 'status-maintenance',
    fault: 'status-fault'
  }
  return statusMap[status] || 'status-normal'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    normal: '正常',
    maintenance: '维护中',
    fault: '故障'
  }
  return statusMap[status] || '未知'
}

// 跳转到设备详情
const goToDeviceDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/devices/detail?id=${id}`
  })
}

// 创建工单
const createWorkOrder = () => {
  uni.navigateTo({
    url: '/pages/work-orders/create'
  })
}

// 下拉刷新
onPullDownRefresh(() => {
  // 模拟数据刷新
  setTimeout(() => {
    uni.stopPullDownRefresh()
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  }, 1000)
})

// 页面加载
onMounted(() => {
  console.log('设备管理页面加载')
})
</script>

<style lang="scss" scoped>
.devices-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  padding-bottom: 120rpx;
}

// 搜索区域
.search-section {
  background: #ffffff;
  padding: 24rpx 32rpx;
  border-radius: 0 0 24rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;

  .search-bar {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .search-input-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;

      .search-icon {
        position: absolute;
        left: 24rpx;
        font-size: 32rpx;
        color: #999;
      }

      .search-input {
        width: 100%;
        height: 80rpx;
        padding: 0 24rpx 0 80rpx;
        border: 2rpx solid #e8e8e8;
        border-radius: 40rpx;
        font-size: 28rpx;
        background: #fafafa;
        transition: all 0.3s ease;

        &:focus {
          border-color: #52c41a;
          background: #ffffff;
          box-shadow: 0 0 0 4rpx rgba(82, 196, 26, 0.1);
        }
      }
    }

    .filter-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 20rpx 24rpx;
      background: linear-gradient(135deg, #52c41a, #73d13d);
      border-radius: 40rpx;
      color: #ffffff;
      font-size: 28rpx;
      font-weight: 500;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);

      &:active {
        transform: scale(0.98);
      }
    }
  }

  .filter-panel {
    margin-top: 24rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 16rpx;

    .filter-row {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .filter-label {
        width: 140rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }

      .filter-options {
        flex: 1;
        display: flex;
        gap: 16rpx;
        flex-wrap: wrap;

        .filter-option {
          padding: 12rpx 24rpx;
          background: #ffffff;
          border: 2rpx solid #e8e8e8;
          border-radius: 24rpx;
          font-size: 26rpx;
          color: #666;
          transition: all 0.3s ease;

          &.active {
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: #ffffff;
            border-color: #52c41a;
            box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.2);
          }
        }
      }
    }
  }
}

// 统计信息
.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 32rpx;
  margin: 24rpx 32rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .stat-item {
    text-align: center;
    flex: 1;

    .stat-value {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;

      &.online {
        color: #52c41a;
      }

      &.offline {
        color: #999;
      }

      &.warning {
        color: #ff4d4f;
      }
    }

    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 设备列表
.device-list {
  padding: 0 32rpx;

  .device-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .device-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24rpx;

      .device-title {
        flex: 1;

        .device-name {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }

        .device-id {
          display: block;
          font-size: 24rpx;
          color: #999;
        }
      }

      .device-status {
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        font-size: 24rpx;
        font-weight: 500;

        &.status-normal {
          background: #f6ffed;
          color: #52c41a;
        }

        &.status-maintenance {
          background: #fff7e6;
          color: #faad14;
        }

        &.status-fault {
          background: #fff1f0;
          color: #ff4d4f;
        }
      }
    }

    .device-location {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 24rpx;
      padding: 16rpx;
      background: #f8f9fa;
      border-radius: 12rpx;

      .location-icon {
        font-size: 28rpx;
      }

      .location-text {
        font-size: 28rpx;
        color: #666;
      }
    }

    .device-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16rpx;
      margin-bottom: 24rpx;

      .metric-item {
        text-align: center;
        padding: 16rpx 8rpx;
        background: #f8f9fa;
        border-radius: 12rpx;

        .metric-label {
          display: block;
          font-size: 22rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .metric-value {
          display: block;
          font-size: 28rpx;
          font-weight: bold;
          color: #333;

          &.low {
            color: #ff4d4f;
          }
        }
      }
    }

    .device-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24rpx;
      border-top: 1rpx solid #f0f0f0;

      .update-time {
        font-size: 24rpx;
        color: #999;
      }

      .online-indicator {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;

        &.online {
          background: #52c41a;
          box-shadow: 0 0 8rpx rgba(82, 196, 26, 0.5);
        }

        &.offline {
          background: #ccc;
        }
      }
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;

  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 24rpx;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 16rpx;
    font-weight: 500;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
  }
}

// 悬浮按钮
.fab {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #52c41a, #73d13d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }

  .fab-icon {
    font-size: 40rpx;
    color: #ffffff;
  }
}
</style>